<template>
    <div>
      <el-dropdown trigger="click" @command="handleSetSize">
        <div class="size-icon--style">
          <svg-icon class-name="size-icon" icon-class="size" />
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value">
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { getCurrentInstance } from 'vue';
  import modal from '@/plugins/modal';
  import {useAppStore} from '@/store/modules/app';
  
  /**
   * 获取应用状态管理 store
   */
  const appStore = useAppStore();
  
  /**
   * 当前布局大小
   * @type {Ref<string>}
   */
  const size = computed(() => appStore.size);
  
  /**
   * 当前路由对象
   * @type {import('vue-router').RouteLocationNormalizedLoaded}
   */
  const route = useRoute();
  
  /**
   * 路由器实例
   * @type {import('vue-router').Router}
   */
  const router = useRouter();
  
  /**
   * 当前组件实例的代理对象
   * @type {import('vue').ComponentPublicInstance | null}
   */
  const { proxy } = getCurrentInstance() || {};
  
  /**
   * 布局大小选项
   * @type {Array<{ label: string, value: string }>}
   */
  const sizeOptions = ref([
    { label: "较大", value: "large" },
    { label: "默认", value: "default" },
    { label: "稍小", value: "small" },
  ]);
  
  /**
   * 处理设置布局大小
   * @param {string} size - 选择的布局大小
   */
  function handleSetSize(size: string) {
    if (proxy) {
        modal.loading("正在设置布局大小，请稍候...");
    }
    appStore.setSize(size);
    setTimeout(() => {
      window.location.reload();
    }, 1000);
  }
  </script>
  
  <style lang='scss' scoped>
  .size-icon--style {
    font-size: 18px;
    line-height: 50px;
    padding-right: 7px;
  }
  </style>